<!--/**
*侧边栏组件*
*
* @author LWG
* @date 2022/8/10 13:45
* @since 1.0.0
*/-->
<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#001e34"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    :collapse="isCollapse"
  >
  <h1 style="margin-top: -40px">
    <div>
        <img src="../assets/logo.png"
          style="height: 150px ;position: relative;top: 6px;margin-top: 0px">
      </div>
      <div style="margin-top: -40px;font-size: 20px;">
        <b style="color: #00DD77;font-size: 25px">时光源 </b>
        <b style="color: #00DD77">Timeyan</b>
      </div>
</h1>

    <el-menu-item index="/home">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/home/article">
      <i class="el-icon-menu"></i>
      <span slot="title">内容管理</span>
    </el-menu-item>
    <el-menu-item index="/home/image">
      <i class="el-icon-picture"></i>
      <span slot="title">素材管理</span>
    </el-menu-item>
    <el-menu-item index="/home/publish">
      <i class="el-icon-document"></i>
      <span slot="title">发布文章</span>
    </el-menu-item>
    <el-menu-item index="/home/comment">
      <i class="el-icon-s-comment"></i>
      <span slot="title">评论管理</span>
    </el-menu-item>
    <el-menu-item index="/home/fans">
      <i class="el-icon-user-solid"></i>
      <span slot="title">粉丝管理</span>
    </el-menu-item>
    <el-menu-item index="/home/settings">
      <i class="el-icon-s-tools"></i>
      <span slot="title">个人设置</span>
    </el-menu-item>

    <!-- 使用 Element 2.8.2 版本所提供的图标-->

      <!-- <div style="font-size: 30px"> -->
      <el-menu-item index="/">
        <template slot="title">
          <i class="el-icon-s-home" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 主页</span>
        </template>
      </el-menu-item>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-custom" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 用户管理</span>
        </template>
        <el-menu-item index="/user">
          <template slot="title">
            <i class="el-icon-user-solid" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 用户列表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/userLoginLog">
          <template slot="title">
            <i class="el-icon-user" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 用户日志</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/announcement">
          <template slot="title">
            <i class="el-icon-s-comment" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 公告通知</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/userFeedback">
          <template slot="title">
            <i class="el-icon-s-finance" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 用户反馈</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-menu-item index="/advertising">
        <template slot="title">
          <i class="el-icon-video-camera" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 广告与服务</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/shopManagement">
        <template slot="title">
          <i class="el-icon-s-shop" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 商品管理</span>
        </template>
      </el-menu-item>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-platform" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 平台管理</span>
        </template>
        <el-menu-item index="/share">
          <template slot="title">
            <i class="el-icon-camera-solid" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 分享平台管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/help">
          <template slot="title">
            <i class="el-icon-s-promotion" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 求助平台管理</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-marketing" style="font-weight: bold; font-size: 30px"></i>
          <span slot="title" style="font-size: 25px;color: #00DD77"> 数据</span>
        </template>
        <el-menu-item index="/userDistribution">
          <template slot="title">
            <i class="el-icon-office-building" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 用户分布</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/newUsers">
          <template slot="title">
            <i class="el-icon-s-flag" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 新增用户</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/activityOfRegion">
          <template slot="title">
            <i class="el-icon-finished" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 区域活跃度</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/numberOAUsers">
          <template slot="title">
            <i class="el-icon-s-data" style="font-size: 20px"></i>
            <span slot="title" style="font-size: 20px;color: #00DD77"> 活跃用户人数</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <!-- </div> -->
  </el-menu>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Navigation',
  data () {
    return {}
  },
  computed: {
    ...mapState(['isCollapse'])
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
}
.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #001e34;
  height: 100px;
  color: #fff;
  img {
    width: 50px;
    height: 50px;
  }
}
.el-menu-item {
  font-size: 18px;
}
</style>
